<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: SOAP, List loading</title>

  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/tree/compat/style.css" media="screen" />
  <link rel="alternate stylesheet" type="text/css" title="Vista Style" href="../../style/tree/vista/style.css" media="screen" />
  <link rel="alternate stylesheet" type="text/css" title="Default Style" href="../../style/tree/default/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    HTML,
    BODY
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .state-error
    {
      color: red;
    }

  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/tree/compat/style_ie.css" media="screen" />
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>
  <script type="text/javascript" src="../../src/basis/net/ajax_.js"></script>

  <script type="text/javascript" src="../demo.js"></script>

  <style type="text/css">
    .demo-list DIV.state-processing
    {
      background: url(../res/img/loading.gif) no-repeat left center;
      padding-left: 20px;
    }

  </style>

</head>

<body>
  <h1>Basic demos: SOAP, List loading</h1>
  
  <p id="demo-summary">
    Simple example of Basis.SOAP
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>


  <script type="text/javascript" id="demo-javascript">

    var STATE = basis.data.STATE;

    var titleResolver = new basis.net.ajax.Transport({
      poolHashGetter: function(requestData){
        return requestData.url;
      },
      poolLimit: 1,
      handler: {
        success: function(req){
          var m = req.data.responseText.match(/<title>([^<]*)<\/title>/i);
          if (m && req.influence[0])
            req.influence[0].update({ title: m[1] });
        },
        failure: function(req){
          req.influence[0].update({ title: 'Fault to load ' + req.requestData.url })
        }
      }
    });

    var UrlDataObject = basis.Class(basis.data.Object, {
      adapter: titleResolver,
      state: STATE.UNDEFINED,
      handler: {
        subscribersChanged: function(){
          if (this.subscriberCount && (this.state == STATE.UNDEFINED || this.state == STATE.DEPRECATED))
          {
            this.adapter.request({
              url: '../' + this.data.url,
              influence: [this]
            });
          }
        },
        stateChanged: function(){
          if (this.subscriberCount && (this.state == STATE.UNDEFINED || this.state == STATE.DEPRECATED))
          {
            this.adapter.request({
              url: '../' + this.data.url,
              influence: [this]
            });
          }
        }
      }
    });

    // create service and it's method
    var indexTransport = new basis.net.ajax.Transport({
      url: '../index.html',
      handler: {
        success: function(req){
          var list = req.data.responseText.match(/url:\s*(\"[^\"]+\"|\'[^\']+\')/g);
          var result = [];

          for (var i = 0; i < list.length; i++)
          {
            var m = list[i].match(/\"([^\"]+)\"|\'([^\']+)\'/);
            result.push(new UrlDataObject({
              data: { url: m[1] || m[2] }
            }));
          }

          links.set(result);
        }
      }
    });
    indexTransport.get();

    var button = new basis.ui.button.Button({
      container: basis.dom.get('demo-container'),
      caption: 'Set active',
      click: function(){
        for (var i = 0, child; child = list.childNodes[i]; i++)
          child.setActive(true);
      }
    });

    var links = new basis.data.Dataset();
    var list = new basis.ui.Container({
      container: basis.dom.get('demo-container'),
      cssClassName: 'demo-list',
      dataSource: links,
      childClass: {
        template:
          '<div class="state-{state}">{title}</div>',

        binding: {
          title: {
            events: 'update',
            getter: function(node){
              return node.data.title || node.data.url;
            }
          }
        }
      }
    });
    
  </script>
</body>

</html>
